import { Size } from "@/plugins/element"
export const useAppStore = defineStore(
  "app",
  () => {
    // setup
    const state = reactive({
      sidebar: {
        // 控制 el-menu 组件展开/闭合 变量
        opened: true
      },
      // 控制 全局组件大小
      size: "default" as Size
      // ...
      // theme
    })
    const sidebar = computed(() => state.sidebar)
    // 控制 el-menu 组件展开/闭合 变量 修改方法
    const toggleSidebar = () => {
      state.sidebar.opened = !state.sidebar.opened
    }
    // 当前 全局组件大小
    const size = computed(() => state.size)
    // 修改size
    const setSize = (size: Size) => (state.size = size)

    // 持久化 1. 存哪个变量， 注意要存的变量必须导出过，不然无法存
    return { state, sidebar, toggleSidebar, size, setSize }
  },
  {
    persist: {
      // 持久化 2. 存哪里
      storage: window.localStorage,
      // 持久化 3. 存哪个变量， 注意要存的变量必须导出过，不然无法存
      pick: ["state.sidebar", "state.size"]
    }
  }
)
